<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="vue.js"></script>
		<script type="text/javascript" src="axios.min.js"></script>
		<script type="text/javascript" src="const.js"></script>
	</head>
	<body>
		<div id="app">
			商品分类：<select v-model="categoryId">
				<option v-for="category in categoryList" 
						v-bind:value="category.categoryId">
						{{category.categoryName}}
				</option>
			</select><br />
			名称：<input v-model="itemName"/><br />
			价格：<input v-model="itemPrice"/><br />
			描述：<input v-model="itemDesc"/><br />
			图片：<input v-model="itemImage"/><br />
			<button v-on:click="update">修改</button>
			
		</div>
	</body>
	<script type="text/javascript">
		var config={
			el:"#app",
			data:{
				categoryId:null,
				categoryList:[],
				itemId:null,
				itemName:null,
				itemPrice:null,
				itemDesc:null,
				itemImage:null
			},
			methods:{
				update:function(){
					var serverUrl=serverHost+"/item/update?itemId="+
					this.itemId+"&itemName="+
					this.itemName+"&itemPrice="+
					this.itemPrice+"&itemDesc="+
					this.itemDesc+"&itemImage="+
					this.itemImage+"&categoryId="+this.categoryId;
					axios.get(serverUrl)
					.then(function(response){
						debugger;
						window.alert(response.data);
						//让浏览器加载item.html
						location.href="item.html";
					})
					.catch();
				},
				selectItemByItemId:function(itemId){
					var serverUrl=serverHost+"/item/findByItemId?itemId="+itemId;
					axios.get(serverUrl)
					.then(function(response){
						debugger;
						var item=response.data;
						this.vue.categoryId=item.categoryId;
						this.vue.itemId=item.itemId;
						this.vue.itemName=item.itemName;
						this.vue.itemPrice=item.itemPrice;
						this.vue.itemDesc=item.itemDesc;
						this.vue.itemImage=item.itemImage;
					})
					.catch();
				},
				selectCategory:function(){
					debugger;
					var serverUrl=serverHost+"/category/selectAll";
					axios.get(serverUrl)
					.then(function(response){
						
						var result=response.data;
						this.vue.categoryList=result;
					})
					.catch();
				}
			},
			mounted:function(){
				debugger;
				//在item.html单击超链接，update.html?itemId=1
				var search=location.search;//?itemId=1
				search=search.substr(1);//itemId=1
				var array=search.split("=");//[0]=itemId [1]=1
				var itemId=array[1];
				console.log(itemId);
				this.selectCategory();
				//服务器和前端只加一处断点
				this.selectItemByItemId(itemId);
			}
		};
		var vue=new Vue(config);
	</script>
</html>
